class Register {
    constructor() {
        this.code = null; // 验证码保存
        this.password = null; // 密码保存
        this.cnt = null; // 记录是否符合规则
        this.imgUrl = "http://www.7xiwang.com/WebService/ImageValidateCode?code="; // 验证码api
        this.regExp = {
            mobile: {
                reg: /^1[3-9]\d{9}$/,
                alert: "手机号格式不正确"
            },
            VCode: {
                reg: new RegExp(this.code, "i"),
                alert: "验证码不正确"
            },
            password: {
                reg: /^[\!\@\#\$\%\^\&\*\(\)0-9a-zA-Z_-]{6,16}$/,
                alert: "必须输入6-16位的字符"
            },
            ConfirmPwd: {
                reg: new RegExp(this.password, ""),
                alert: "两次输入密码不一致"
            },
            LoginId: {
                reg: /^[a-zA-Z0-9-_]{4,20}$/
            }
        }
        this.init();
    }
    init() {
        // 处理input 函数
        this.handleHover();
        // 处理图片验证码
        this.loadImg();
        // 图片点击事件函数
        $("#ConfirmImage").click($.proxy(this.loadImg, this));
        // 同意协议
        $("#IsAgreeContract").click($.proxy(this.agreeProtocol, this));
        // 表单提交
        $("#registerbtnPhone").click($.proxy(this.submit, this));
    }

    agreeProtocol() {
        $("#IsAgreeContract").attr("agree") === "true" ? $("#IsAgreeContract").attr("agree", "false") : $("#IsAgreeContract").attr("agree", "true");
    }

    submit() {
        this.cnt = 0;
        $.each($(".regtext"), $.proxy(function(index, item) {
            let id = $(item).attr("id");
            let val = $(item).val();
            this.handleVerify(id, val, $(item), $(item).nextAll(".verifi"))
        }, this))
        if (this.cnt === $(".regtext").length && $("#IsAgreeContract").attr("agree") === "true") {
            this.querySql(); // 请求数据库
        }
    }

    loadImg() {
        this.code = this.GetRandomCode(4); // 四位验证码
        this.regExp.VCode.reg = new RegExp("^" + this.code + "$", "i"); // 更新验证码正则
        $("#ConfirmImage").attr("src", this.imgUrl + this.code);
    }

    //n表示生成随机码的位数 
    GetRandomCode(n) { 
        let chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']; 
        let res = ""; 
        for (let i = 0; i < n; i++) {  
            let id = Math.ceil(Math.random() * 35);  
            res += chars[id]; 
        } 
        return res;
    }

    handleHover() {
        $(".regtext").focus($.proxy(function(e) {
            $(e.target).nextAll(".verifi").css("display", "inline-block");
            $(e.target).nextAll(".verifi").addClass("greybg");
            $(e.target).nextAll(".verifi").html($(e.target).attr("data-msg"));
        }, this));
        $(".regtext").blur($.proxy(function(e) {
            let id = $(e.target).attr("id");
            let val = $(e.target).val();
            this.handleVerify(id, val, $(e.target), $(e.target).nextAll(".verifi"));
        }, this))
    }

    handleVerify(id, val, ipt, span) {
        if (val.length === 0) {
            span.css("display", "inline-block")
            span.removeClass("greybg");
            span.html(ipt.attr("placeholder"));
            return;
        }
        if (!this.regExp[id].reg.test(val)) {
            span.removeClass("greybg");
            span.html(this.regExp[id].alert);
            return;
        }
        if (id === "password") {
            this.password = val;
            this.regExp.ConfirmPwd.reg = new RegExp("^" + this.password + "$");
        }
        span.css("display", "none");
        this.cnt++; // 符合
    }

    querySql() {
        let url = "http://localhost:3002/register";
        let data = {
            usr: $("#LoginId").val(),
            pwd: md5($("#password").val()),
            phone: parseInt($("#mobile").val())
        }
        let def = $.ajax({
            type: "GET",
            url: url,
            data: data,
            dataType: "JSON"
        })
        let TOKENINFO = "usr=" + data.usr + "&pwd=" + data.pwd;
        def.then(function(res) {
            console.log(res);
            if (res.code === 1) {
                alert(res.data);
            } else if (res.code === 2) {
                alert(res.data);
                $.cookie("TOKEN", TOKENINFO, {
                    path: "/",
                    expires: 15
                });
                window.location.href = "login.html";
            }
        })
    }
}

new Register();